<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import { userLogin } from "../../../api/api";

const isLogin = ref(false)
const data = ref<any>([])
onMounted(()=>{
    login()
})

const login = async() => {
    const res = await userLogin({_id:localStorage.getItem('mail') as string})
    if(res.data.code === '404') return isLogin.value = true
    data.value.push(res.data.data)
}
</script>

<template>
    <div class="content">
        <div class="item">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>个人中心</el-breadcrumb-item>
                <el-breadcrumb-item>信息管理</el-breadcrumb-item>
                <el-breadcrumb-item>账号信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-empty style="height: 100%;" description="请先登陆" v-if="isLogin"/>
        <div class="data" v-if="!isLogin" v-for="i in data">
            <div class="user">用户名称：<span>{{i.mail}}</span></div>
            <div class="mail">认证邮箱：<span>{{i.mail}}</span></div>
            <div class="user">我的密码：<span>{{i.password}}</span></div>
            <div class="mail">剩余积分：<span>{{i.frequency}}</span></div>
            <div class="user">识别id：<span>{{i._id}}</span></div>
            <div class="start">账号状态：<span><el-tag type="success">{{i.state}}</el-tag></span></div>
        </div>
    </div>
</template>

<style scoped>
.content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
}
.data{
    width: 100%;
    min-height: 100px;
    margin-top: 30px;
}
.mail,.start{
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    align-items: center;
}
.start{
    justify-content: space-between;
}
.user{
    width: 100%;
    height: 50px;
    background-color: #f5f7fa;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    align-items: center;
}
span{
    font-size: 12px;
    color: #999;
    position: relative;
    top: 2px;
}
</style>